@charset "utf-8";
.position-margin{
    position:absolute;
    margin:0 auto;
    left:0;
    right:0;
}

.page09{
    overflow: hidden;
    position: relative;
    .content-border{
        margin:0 auto; 
        width:280px;
        height:450px;
        position:relative;
        .page09-big-border{               
                img{
                   @extend .position-margin;
                    bottom:0; 
                    top:293px;
//                  left:144px;
                    transform: translateX(500%);
                    height:200px;
                    width:130px;
                    opacity: 0;
                    
                }
        }
        .page09-mother{               
                img{
                   @extend .position-margin;
                    bottom:0; 
                    top:313px;
//                  left:184px;
                    opacity: 0;
                   
                    transform: translateX(400px);
                }
        }
        .speech-border{               
                img{
                   @extend .position-margin;
                    bottom:0; 
                    top:283px;
                    left:60px;  
                    opacity: 0;                 
                    transform: rotateZ(-90deg) translateY(400px);
                }
        }
        .speech-title{
            @extend .position-margin;
            bottom:115px;
//          left:137px;
            font-size: 12px;
            left:200%;
            opacity: 0;
            width:100px;
        }
        .first-line{
            display: flex;
            justify-content: space-between;
            .page09-border>a>img{
                margin-top:-10px;
            }
            
            .page09-border{
                margin-top:10px;
                width:131px;
                height:131px;
                border:2px solid black;
                background: white;
                transform: translateX(400px);    
                opacity: 0;     
                box-sizing: border-box;      
            }
            
            .small-border{
                position:absolute;
                box-sizing: border-box;
                bottom:0;
                background: #E87474;
                width:128px;
                height:28px;
                border:1px solid black;
                left:200px;
                opacity: 0;
                img{
                    width:20px;
                    float:left;
                    height:20px;
                    margin-top:3px;
                    margin-left:10px;
                }
                span{
                    width:40px;
                    height:28px;
                    display:block;
                    float:left;
                    line-height: 28px;
                    margin-left:20px;
                    color:white;
                }
            }
        }
              
    }
}



.page09.active{
    .content-border{
        .first-line{
            .page09-border{
                animation: page09-border 500ms ease 400ms forwards;             
            }
            .small-border{
                animation: small-border 500ms ease 600ms forwards;
            }
        }
        .page09-big-border{
            img{
               animation: page09-big-border 500ms ease 1.7s forwards; 
            }             
        }
        .page09-mother{
            img{
                animation: page09-mother 500ms ease 1.9s forwards;
            }
            
        }
        .speech-border{
            img{
                animation: speech-border 500ms ease 2.6s forwards;
            }
        }
        .speech-title{
             animation: speech-title 500ms ease 3s forwards;
        }
              
    }
}


//page09-border
@keyframes page09-border{
    0%{opacity: 1;}
    33%{transform: translateX(-20px);opacity: 1;}
    66%{transform: translateX(10px);opacity: 1;}
    100%{transform: translateX(0px);opacity: 1;}
}
//page09-border
//small-border
@keyframes small-border {
    0%{opacity: 1;}
    33%{left:-10px;opacity: 1;}
    66%{left:10px;opacity: 1;}
    100%{left:0;opacity: 1;}
}
//small-border

//page09-big-border
@keyframes page09-big-border {
    0%{opacity: 1;}
    33%{transform: translateX(55px);opacity: 1;}
    66%{transform: translateX(85px);opacity: 1;}
    100%{transform: translateX(75px);opacity: 1;}
}
//page09-big-border

//mother
@keyframes page09-mother {
    0%{opacity: 1;}
    33%{transform: translateX(80px);opacity: 1;}
    66%{transform: translateX(110px);opacity: 1;}
    100%{transform: translateX(100px);opacity: 1;}
}
//mother

//speech-border
@keyframes speech-border {
    0%{opacity: 1;}
    33%{transform: rotateZ(-90deg) translateY(-20px);opacity: 1;}
    66%{transform: rotateZ(-90deg) translateY(10px);opacity: 1;}
    100%{transform: rotateZ(-90deg) translateY(0px);opacity: 1;}
}
//speech-border

//speech-title
@keyframes speech-title {
    0%{opacity: 1;}
    33%{opacity: 1;left:55px;}
    66%{opacity: 1;left:125px;}
    100%{opacity: 1;left:95px;}
}
//speech-title